<template>
  <div class="xq-form-wrapper page-miH page-bgBack p24">
    <div class="xq-form-search">
      <a-input-search
        allowClear
        v-if="$hasPermission('zhinengsuanshui:baoshuirenyuanku:search')"
        v-model="selectName"
        placeholder="姓名/身份证号/手机号"
        style="width: 200px"
        @search="onSearch"
      />
      <div style="text-align: right; margin-top: -32px">
        <a-space>
          <a-button @click="visible = true" class="mr2" v-if="$hasPermission('zhinengsuanshui:baoshuirenyuanku:import')"> 导入 </a-button>
          <a-button type="primary" v-if="$hasPermission('zhinengsuanshui:baoshuirenyuanku:create')" @click="onAdd"> 新建人员 </a-button>
        </a-space>
      </div>
    </div>
    <div class="xq-form-wrapper">
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          class="xq-form-content-table"
          :row-selection="
            FormJson['config']['table']['extend']['batch']
              ? {
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange
                }
              : null
          "
          @change="onTableChange"
        >
          <!-- 主要内容，表格，自定义 header -->
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- 主要内容，表格，自定义 td -->
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <!-- <img :src="record.avatar" class="avatar" /> -->
            <span v-if="col.dataIndex === 'tableAction'" :key="index">
              <a @click="onInfo(record)">详情</a>
              <a-divider type="vertical" />
              <a-popconfirm
                :disabled="record.companyUnitsVO === null"
                :title="`确认要删除吗？`"
                ok-text="确认"
                cancel-text="取消"
                @confirm="onDel(record.id)"
              >
                <a v-if="$hasPermission('zhinengsuanshui:baoshuirenyuanku:del')">删除</a>
              </a-popconfirm>
            </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
    <importAdd :visible.sync="visible" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getEmployees, delEmployeeId } from "./api";

import importAdd from "./imports/add";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  components: {
    importAdd
  },
  data() {
    return {
      visible: false,
      spinning: false,
      tableData: [],
      selectName: "",
      total: 0,
      pageNo: 1,
      pageSize: 10
    };
  },
  created() {
    this.onGetEmployees();
  },
  methods: {
    async onGetEmployees() {
      try {
        this.spinning = true;
        const { data } = await getEmployees({
          selectName: this.selectName || null,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetEmployees();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetEmployees();
    },
    onSearch() {
      this.pageNo = 1;
      this.onGetEmployees();
    },
    onClose() {},
    async onDel(id) {
      try {
        await delEmployeeId(id);
        if (this.tableData.length === 1) {
          this.pageNo = 1;
        }
        this.onGetEmployees();
        this.$notification["success"]({
          message: "删除成功"
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onAdd() {
      this.$router.push({
        name: "taxCalculatePeopleAdd",
        query: { status: "add" }
      });
    },
    onInfo(e) {
      console.log(e);
      this.$router.push({ name: "taxCalculatePeopleAdd", query: { empId: e.id, status: "edit" } });
    }
  }
};
</script>

<style lang="scss" scoped></style>
